<template>
   <div class="container-y">
      <div class="title"><img src="../assets/123.png" alt=""></div>
      <div class="title-text">请选择合适的开课时间</div>
      <div class="choose-pal">开课时间请选择工作日</div>
      <div class="choose-data">
         <div class="text"><datetime v-model="value" :start-date="startDate" :end-date="endDate"></datetime></div>
      </div>
      <div class="timebox-list">
        <div class="time-table" v-for="(choosetab,index) in list" :key="index">
          <div class="tab-item" @click="chooseTime(choosetab.itemcode)" :class="{'active': choosetab.itemcode === itemcode}" >{{choosetab.itemvalue}}</div>
        </div>
    </div>
    <div class="next-go" @click="goEnd"> 完成</div>
   </div>
</template>
<script>
import { Datetime } from 'vux'
export default {
  components: {
    Datetime,
     },
  data(){
      return{
        value:'',
        list:'',
        itemcode:"",
        value:"",
        startDate:"",
        endDate:''
      }
  },
  created(){
      this.value=this.getDateStr(1)
  },
   mounted(){
    this.information()
   this.setToday ()
   this.setEndtime()
 },
 methods:{
     getDateStr(AddDayCount){ 
         var dd = new Date(); 
         dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 
         var y = dd.getFullYear(); 
         var m = dd.getMonth()+1;//获取当前月份的日期 
         if (m < 10) m = '0' + m
         var d = dd.getDate(); 
         if (d < 10) d = '0' + d
         return y+"-"+m+"-"+d; 
    },
     setToday () { //今天时间
      let now = new Date()
      this.startDate =this. getDateStr(1)
    },
    setEndtime(){
          this.endDate = this. getDateStr(5)
     
    },
   goEnd(){
       
     let data={
       orderNum:this.$route.query.order,
       startDate:this.value,
       timeSlot:this.itemcode
     }
     console.log(data)
     this.$axios.get('http://www.chenyekeji.com/bsti-rbac/pay/selectTime',{
       params:data
     }).then((res) => {
         console.log(res)
         this.$vux.alert.show({
            title: '请稍后',
             content: '系统将在1个工作日内给您分配教师',
             onShow () {
                 console.log('Plugin: I\'m showing')
             },
             onHide () {
                 WeixinJSBridge.call('closeWindow');
             }
         })
      })
   },
   information(){
      this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/getTimeSlot')
          .then((res) => {
             console.log(res)
              this.list=res.data.data
          })
   },
   chooseTime(itemcode){
       this.itemcode=itemcode
   }
 }
}
</script>
<style scoped>
.timebox-list{
  margin:56px 0;
  height: 594px;
  overflow: auto;
}
.time-table{
    display: flex;
    justify-content: center;
}
.tab-item{
    width:300px;
    height: 60px;
    line-height: 60px;
    margin-bottom:20px;
    border:1px solid #e0e0e0;
    color: #ff8181;
    border-radius: 6px;
   font-size: 28px;
    background: #f4f4f4;
}
.choose-data{
    display: flex;
    justify-content: center;
}
.text{
    width:300px;
    height: 60px;
    line-height: 60px;
    border-top:1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.choose-pal{
    padding-top:46px;
   font-size: 28px;
    color:#666666 ;
}
.container-y .text{
    margin-top:18px;
}
.container-y{
    height:100%;
    width:100%;
}
.title{
      padding:60px 0;
      display: flex;
      justify-content: center;
  }
  .title img{
      height:32px;
      width:296px;
  }
  .title-text{
      font-size: 32px;
      color: #ff3434;
      text-align: center;
  }
  .next-go{
    line-height: 75px;
    height: 75px;
    background: #ff3434;
    text-align: center;
    font-size: 32px;
    margin: 70px 20px 0 20px;
    color: #fff;
    border-radius: 4px;
}
.next-go a{
   color: #fff;  
   display: block;
}
.time-table .active{
   background:#ff3434;
   color: #fff;
}
</style>


